<template>
  <Row
    v-show="dragShow"
    class="page-mark-drag"
    :style="{transform: `translate(${dragInfo.x-componentHalfHeight}px,${dragInfo.y-componentHalfHeight}px)`}"
  >
    <Col
      class="page-mark-col"
      :span="(dragInfo.componentData && dragInfo.componentData.location && dragInfo.componentData.location.w) || 12"
    >
    <!-- 显示组件 -->
    <div :style="dragInfo.componentData.style" v-if="dragInfo.componentData">
      <component
        :is="dragInfo.componentData.name"
        :data="dragInfo.componentData"
        :drag="true"
        v-if="dragInfo.componentData"
      ></component>
    </div>
    </Col>
  </Row>
</template>

<script>
import { mapState } from 'vuex';
import { componentHalfHeight } from './config/code';

// 基础组件
import textItem from './Middle/Basic/TextItem';
import inputItem from './Middle/Basic/InputItem';
import selectItem from './Middle/Basic/SelectItem';
import switchItem from './Middle/Basic/SwitchItem';
import datepickerItem from './Middle/Basic/DatepickerItem';
import buttonItem from './Middle/Basic/ButtonItem';
import checkboxItem from './Middle/Basic/CheckboxItem';
import radioItem from './Middle/Basic/RadioItem';
import checkboxgroupItem from './Middle/Basic/CheckboxgroupItem';
import radiogroupItem from './Middle/Basic/RadiogroupItem';
import rateItem from './Middle/Basic/RateItem';
import tableItem from './Middle/Basic/TableItem';
// 高级组件
import sectionItem from './Middle/Senior/SectionItem';
import delimitItem from './Middle/Senior/DelimitItem';

export default {
  components: {
    textItem,
    inputItem,
    switchItem,
    selectItem,
    datepickerItem,
    buttonItem,
    checkboxItem,
    radioItem,
    checkboxgroupItem,
    radiogroupItem,
    rateItem,
    tableItem,
    sectionItem,
    delimitItem
  },
  computed: {
    ...mapState({
      dragShow: state => state.mark.dragShow,
      dragInfo: state => state.mark.dragInfo
    })
  },
  data () {
    return {
      componentHalfHeight
    }
  }
}
</script>

<style lang="less" scoped>
.page-mark-drag {
  width: calc(100% - 460px);
  .page-mark-col {
    background: #fff;
    min-height: 30px;
  }
}
</style>
